<template>
  <div class="bg" v-if="!userS.userInfo.token">
    <div class="content">
      <div class="svg">
        <router-link :to="`/pc/login`">
          <q-btn
              size="22px"
              class="q-px-xl q-py-xs"
              color="black"
              label="Sign Up"
              :icon="biSendFill"
          />
        </router-link>

      </div>
      <div>
        <h2 style="white-space:nowrap">Sign up for our newsletter</h2>
      </div>
      <div></div>
      <div>
        <span>
          <p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import {defineProps, defineEmits, defineExpose, ref} from 'vue'
import { biSendFill } from '@quasar/extras/bootstrap-icons'
import { userStore } from '@/store/user.ts';

const userS = userStore()
console.log()

defineProps({})

const emit = defineEmits([])

defineExpose({})

const slide = ref(1)
</script>

<style scoped lang='less'>

.bg{
  background-color: #000000;
  border-radius: 10px;
  padding: 180px 50px;
}
:deep(.q-carousel){
  background-color: black;
}
.q-carousel__slide{
  background-color: #000000;
}
:deep(.q-panel){
  background-color: #000000;
}
.content{
  width: 100%;
  height: 100%;
  padding: 0 20%;
}
.svg{
  text-align: center;
  margin-bottom: 10px;
}
h2{
  text-align: center;
  font-size: 50px;
  color: white;
  font-weight: 800;
}
p{
  color: white;
  text-align: center;
}
.q-btn{
  border: 1px solid white;
  border-radius: 10px;
}
</style>